/*
*
*试卷管理
*/
<template>
  <div id="testPaper">
    <!-- 头部面包屑 -->
    <div class="top_crumba">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{path:'/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>在线测试</el-breadcrumb-item>
        <el-breadcrumb-item>试卷管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片布局 -->
      <el-card class="box-card">
        <!-- 试卷类型 -->
        <div class="test_paper_type">
          <!-- acquireRow悬停时获取行的内容   paperNumber试卷数量 -->
          <el-table :data="paperNumber" border style="width: 100%" @cell-mouse-enter="acquireRow">
            <el-table-column type="index" :index="indexMethod" prop="special" label="#" width="50"></el-table-column>
            <el-table-column prop="tpTitle" label="标题" width="180"></el-table-column>
            <el-table-column prop="userName" label="出卷人"></el-table-column>
            <el-table-column prop="courseName" label="课程" width="160"></el-table-column>
            <el-table-column label="出卷日期">
              <template slot-scope="scope">
                <span >
                  {{scope.row.tpDate | formatDate}}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作" width="220">
              <!-- testPaperCompile -->
              <el-button size="mini" @click="dialogFormVisible =true">编辑</el-button>
              <el-button size="mini" @click="particulars">详情</el-button>
              <el-button type="danger" size="mini" @click="deleRow">删除</el-button>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <el-card>
        <!-- 底部分页加载 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40,50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="testPaperPageCount"
          ></el-pagination>
        </div>
      </el-card>
    </div>
    <!-- 编辑模态框 -->
    <el-dialog
      title="修改试卷信息"
      :visible.sync="dialogFormVisible"
      center
      :modal-append-to-body="modal"
    >
      <el-form :model="form">
        <el-form-item label="试卷标题" :label-width="formLabelWidth ">
          <el-input v-model="form.name" auto-complete="off" value="name"></el-input>
        </el-form-item>
        <el-form-item label="专业课程" :label-width="formLabelWidth">
          <el-select v-model="form.region">
            <el-option v-for="(item,index) in getCurriculum" :key="index" :value="item.courseName"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="testPaperEdit(form.name,form.region)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { formatDate } from '../../uilt/timeHandle.js'
export default {
  data() {
    return {
      getCurriculum: [], //所有课程
      paperNumber: [], //试卷数量
      tpId: 0, //试卷ID
      currentPage4: 1, //分页默认页数  首次默认第一页
      pageSize: 10, //默认10也
      pageIndex: 1, //当前页
      testPaperPageCount: 0, //试卷页数
      dialogFormVisible: false,
      form: {
        //编辑试卷名称
        name: "",
        region: ""
      },
      formLabelWidth: "70px",
      modal: false, //模态框隐藏
      paperInitialData: {
        //编辑试卷最初试卷
        tpTitle: "",
        courseName: ""
      }
    };
  },
  methods: {
    //试卷类型表格排序
    indexMethod(index) {
      return index + 1;
    },
    //详情跳转页面
    particulars() {
      this.$router.push({ path: "/testpaperedit", query: { id: this.tpId } });
    },
    //悬停时获取该行对应的内容
    acquireRow(e) {
      this.tpId = e.tpId;
      this.form.name = e.tpTitle;
      this.form.region = e.courseName;
      //存储最初数据
      this.paperInitialData.tpTitle = e.tpTitle;
      this.paperInitialData.courseName = e.courseName;
    },
    //编辑试卷
    testPaperEdit(tptitle, courseName) {
      let _this = this;
      var title;
      var tpCourseId = 0;
      //判断标题是不是为空
      if ("" != tptitle) {
        //看初始数据跟输入的数据是否一样如果一样则数据没有变化
        if (
          _this.paperInitialData.tpTitle == tptitle &&
          _this.paperInitialData.courseName == courseName
        ) {
          title = "数据没有变化";
          _this.promptDialogBox("info", title);
        } else {
          //修改的的课程对比全部课程取对应的课程编号
          _this.getCurriculum.forEach(item => {
            if (item.courseName == courseName) {
              tpCourseId = item.courseId; //获取到对应的课程编号
            }
          });
          _this.axios
            .post("/api/TestPaper/ModifyTestPaper", {
              tpId: _this.tpId,
              tpCourseId: tpCourseId,
              tpTitle: _this.form.name
            })
            .then(res => {
              console.log(res);
              if (res.data.code === 1) {
                //给修改过的数据进行从新赋值
                _this.paperNumber.forEach(item => {
                  if (_this.tpId == item.tpId) {
                    item.tpTitle = tptitle;
                    item.courseName = courseName;
                  }
                });

                title = "修改成功";
                _this.promptDialogBox("success", title);
              }
              _this.dialogFormVisible = false;
            })
            .catch(e => {
              console.log(e);
            });
        }
      } else {
        title = "标题不能为空";
        _this.promptDialogBox("info", title);
      }
    },
    //删除行数
    deleRow() {
      let _this = this;
      //获取试卷编号
      let id = _this.tpId;
      _this
        .$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          _this.axios
            .post("/api/TestPaper/RemoveTestPaper?id=" + id)
            .then(res => {
              if (res.data.code == 1) {
                //过滤一个新的数组
                _this.paperNumber = _this.paperNumber.filter(e => e.tpId != id);
                _this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }
            })
            .catch(e => {
              console.log(e);
            });
        })
        .catch(() => {
          _this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 分页下的某页
    handleSizeChange(val) {
      let _this = this;
      _this.pageSize = val;
      _this.getTask();
    },
    //当前页
    handleCurrentChange(val) {
      let _this = this;
      _this.pageIndex = val;
      _this.getTask();
    },
    getTask() {
      this.axios
        .get("/api/TestPaper/GetTestPaperList", {
          params: {
            pageIndex: this.pageIndex,
            pageSize: this.pageSize
          }
        })
        .then(res => {
          this.paperNumber = res.data.data;
          // this.cutDate();
        })
        .catch(e => {
          console.log(e);
        });
    },
    //提示框
    promptDialogBox(color, title) {
      let _this = this;
      _this.$message({
        type: color,
        message: title
      });
    },
    //初始数据
    initialData() {
      let _this = this;
      //promise调用axios.then里使用resolve回调,在cacth中使用reject回调
      //获取课程
      let allCurriculun = new Promise((resolve, reject) => {
        _this.axios
          .get("/api/Class/GetAllCourse")
          .then(res => {
            resolve(res);
          })
          .catch(err => {
            reject(err);
          });
      });
      //分页获取试卷
      let paging = new Promise((resolve, reject) => {
        _this.axios
          .get("/api/TestPaper/GetTestPaperList")
          .then(res => {
            resolve(res);
          })
          .catch(e => {
            reject(e);
          });
      });
      Promise.all([allCurriculun, paging]).then(res => {
        //所有课程
        _this.getCurriculum = res[0].data;
        //试卷页数
        _this.testPaperPageCount = res[1].data.items;
        _this.paperNumber = res[1].data.data;
        // _this.cutDate();
      });
    },
    // cutDate() {
    //   this.paperNumber.forEach(
    //     item =>
    //       // console.log(item.tpDate.substring(0,10))
    //       //截取年月日
    //       (item.tpDate = item.tpDate.substring(0, 10))
    //   );
    // }
  },
  //首次加载 初始化数据
  created() {
    this.initialData();
  },
  filters: {
    formatDate(item) {
      let newData = new Date(item);
      return  formatDate(newData, 'yyyy-MM-dd');
    }
  }
};
</script>

<style scoped lang="less">
.box-card {
  margin-top: 19px !important;
}
/deep/.el-dialog {
  width: 30%;
}
/deep/.el-dialog--center {
  padding: 25px 25px 0px;
  // height: 500px;
}
.block {
  padding-left: 20px;
  text-align: center;
}
</style>
